<div [ngClass]="themeClass">
    <layout-header *ngIf="showHeader" (childOuter)="themeChenge($event)"></layout-header>
    <div class="controlMain">
        <div [ngClass]="contentClass">
            <div class="title">
                <div class="name">报警列表</div>
                <div class="num">{{alarmTotal}}</div>
                <div class="search station" style="border:0;">
                    <!--起止日期-->
                    起：
                    <nz-date-picker nzFormat="yyyy-MM-dd" [nzAllowClear]="false" [(ngModel)]="shijianStartValue"
                        class="jzrq">
                    </nz-date-picker>
                    止：
                    <nz-date-picker nzFormat="yyyy-MM-dd" [nzAllowClear]="false" [(ngModel)]="shijianEndValue"
                        class="jzrq">
                    </nz-date-picker>
                    <!--车间工区车站-->
                    <app-farmreact *ngIf="farmreact" #farmReact [theme]="selectClass"></app-farmreact>
                    <!--报警类型-->
                    报警类型：
                    <nz-select [nzDropdownClassName]="selectClass" nzShowSearch class="wd" [(ngModel)]="bjlxValue">
                        <ng-container *ngFor="let data of bjlxList">
                            <nz-option nzCustomContent [nzValue]="data.id" [nzLabel]="data.text"> {{data.text}}
                            </nz-option>
                        </ng-container>
                    </nz-select>
                    <!--报警级别-->
                    报警级别：
                    <nz-select [nzDropdownClassName]="selectClass" nzShowSearch class="wd" [(ngModel)]="bjjbValue">
                        <ng-container *ngFor="let data of bjjbList">
                            <nz-option nzCustomContent [nzValue]="data.id" [nzLabel]="data.text">
                                {{data.text}}
                            </nz-option>
                        </ng-container>
                    </nz-select>
                    <button nz-button nzType="primary" (click)="searchType()">查询</button>
                </div>
            </div>
            <div class="list" *ngIf="showTable" [ngClass]="{'tableContainnerHeight': tableContainnerHeight}">
                <nz-skeleton [nzActive]="true" [nzLoading]="listload"></nz-skeleton>
                <div [ngClass]="{'tableHeight': tableHeight}">
                    <table width="100%" *ngIf="!listload">
                        <thead>
                            <tr>
                                <th class="center">序号</th>
                                <th class="center">车间</th>
                                <th class="center">车站</th>
                                <th class="center">报警级别</th>
                                <th class="center">报警类型</th>
                                <th class="center">报警时间</th>
                                <th class="center">报警名称</th>
                                <th class="center">设备类型</th>
                                <th class="center">设备名称</th>
                                <th class="center">恢复时间</th>
                                <th class="center">处置建议</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let data of alarmList" (dblclick)="alarmCommand(data)" style="cursor:pointer">
                                <td class="center" nz-tooltip nzTooltipTitle="双击查看详情" nzTooltipPlacement="bottom">
                                    {{data.num}}</td>
                                <td nz-tooltip nzTooltipTitle="双击查看详情" nzTooltipPlacement="bottom">{{data.workshop}}
                                </td>
                                <td nzAlign="center" nz-tooltip nzTooltipTitle="双击查看详情" nzTooltipPlacement="bottom">
                                    {{data.stationname}}
                                </td>
                                <td class="center" nz-tooltip nzTooltipTitle="双击查看详情" nzTooltipPlacement="bottom">
                                    {{data.alarmlevel}}
                                </td>
                                <td nz-tooltip [nzTooltipTitle]="data.alarmTypeName" nzTooltipPlacement="bottom">
                                    {{data.alarmTypeName}}</td>
                                <td nzAlign="center" nz-tooltip nzTooltipTitle="双击查看详情" nzTooltipPlacement="bottom">
                                    {{data.nTime}}</td>
                                <td nzAlign="center" nz-tooltip [nzTooltipTitle]="data.alarmtext"
                                    nzTooltipPlacement="bottom">
                                    <ellipsis length="40">{{data.alarmtext}}</ellipsis>
                                </td>
                                <td nz-tooltip [nzTooltipTitle]="data.devTypeName" nzTooltipPlacement="bottom">
                                    {{data.devTypeName}}</td>
                                <td nzAlign="center" nz-tooltip [nzTooltipTitle]="data.devname"
                                    nzTooltipPlacement="bottom">
                                    {{data.devname}}</td>
                                <td nzAlign="center" nz-tooltip nzTooltipTitle="双击查看详情" nzTooltipPlacement="bottom">
                                    {{data.eTime}}</td>
                                <td nz-tooltip [nzTooltipTitle]="data.czjy" nzTooltipPlacement="bottom">
                                    <ellipsis length="30">{{data.czjy}}</ellipsis>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="pagination">
                    <nz-pagination (nzPageIndexChange)="rowChange($event)" [nzPageIndex]="page" [nzTotal]="alarmTotal"
                        [nzPageSize]="limit"></nz-pagination>
                </div>
            </div>
        </div>

        <div [ngClass]="contentClass" style="margin:2px 12px 12px 12px;">
            <div class="contwrap" style="margin:0;">
                <div class="title">
                    <div class="name">报警统计</div>
                    <div class="search station" style="border:0;">
                        起：
                        <nz-date-picker nzFormat="yyyy-MM-dd" [nzAllowClear]="false" [(ngModel)]="shijianStartValue2"
                            class="jzrq">
                        </nz-date-picker>
                        止：
                        <nz-date-picker nzFormat="yyyy-MM-dd" [nzAllowClear]="false" [(ngModel)]="shijianEndValue2"
                            class="jzrq">
                        </nz-date-picker>
                        图形类型：
                        <nz-select style="width: 120px;" [(ngModel)]="echartsTypeValue" [nzAllowClear]="false">
                            <nz-option nzValue="line" nzLabel="折线图"></nz-option>
                            <nz-option nzValue="bar" nzLabel="柱状图"></nz-option>
                            <nz-option nzValue="pie" nzLabel="饼图"></nz-option>
                        </nz-select>
                        分组类型：
                        <nz-select style="width: 120px;" [(ngModel)]="groupTypeValue" [nzAllowClear]="false">
                            <nz-option nzValue="workshop" nzLabel="车间分类"></nz-option>
                            <nz-option nzValue="workarea" nzLabel="工区分类"></nz-option>
                            <nz-option nzValue="stationname" nzLabel="车站分类"></nz-option>
                            <nz-option nzValue="devTypeName" nzLabel="设备分类"></nz-option>
                            <nz-option nzValue="utime" nzLabel="时间分类"></nz-option>
                        </nz-select>
                        <button style="margin-left:10px" nz-button nzType="primary" (click)="searchStat()">查询</button>
                    </div>
                </div>
                <div style="width:100%;height:310px" id="echarsAlarm"></div>
            </div>
        </div>
    </div>
</div>